import {
  AppstoreOutlined,
  MailOutlined,
  SettingOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import React from 'react';

import { history } from 'umi';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key?: React.Key | null,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

export const itemsArr = [
  {
    title: '首页',
    key: '/welcome',
    icon: <MailOutlined />,
    auth: 1,
  },
  {
    title: 'ui',
    key: 'sub2',
    icon: <AppstoreOutlined />,
    children: [
      {
        title: '按钮',
        key: '/ui/buttons',
      },
      {
        title: '弹框',
        key: '/ui/modals',
      },
    ],
    auth: 2,
  },
  {
    title: '表单',
    key: 'sub3',
    icon: <AppstoreOutlined />,
    children: [
      {
        title: '登录',
        key: '/form/login',
      },
      {
        title: '注册',
        key: '/form/reg',
      },
    ],
    auth: 3,
  },
  {
    title: '表格',
    key: '/table',
    icon: <SettingOutlined />,
    auth: 4,
  },
  {
    title: '富文本',
    key: '/rich',
    icon: <SettingOutlined />,
    auth: 5,
  },
  {
    title: '学生管理',
    key: '/students',
    icon: <SettingOutlined />,
    auth: 6,
  },
  {
    title: '地图',
    key: '/map',
    icon: <SettingOutlined />,
    auth: 7,
  },
];

// const items: MenuItem[] = [
//   getItem('首页', '/welcome', <MailOutlined />),

//   getItem('ui', 'sub2', <AppstoreOutlined />, [
//     getItem('按钮', '/ui/buttons'),
//     getItem('弹框', '/ui/modals'),
//     getItem('loading', '/ui/loading'),
//     getItem('通知提醒', '/ui/notice'),
//     getItem('message', '/ui/message'),
//     getItem('tab', '/ui/tabs'),
//     getItem('轮播图', '/ui/banners'),
//   ]),

//   getItem('富文本', '/rich', <SettingOutlined />),
// ];

const onClick: MenuProps['onClick'] = (e) => {
  // console.log('click', e);
  history.push('/admin' + e.key);
};

const App: React.FC = () => {
  const auth = JSON.parse(localStorage.getItem('auth') || '[]');
  const items: MenuItem[] = itemsArr.map((item) => {
    if (auth.includes(item.auth)) {
      return getItem(
        item.title,
        item.key,
        item.icon,
        item.children
          ? item.children.map((child) => getItem(child.title, child.key))
          : undefined,
      );
    } else {
      return null;
    }
  });
  return <Menu onClick={onClick} mode="vertical" items={items} theme="dark" />;
};

export default App;
